<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <title>添加权限</title>
        <header th:replace="sys/head::html"></header>
        <link rel="stylesheet" th:href="@{/X-admin/lib/layui/dtree/dtree.css}">
        <link rel="stylesheet" th:href="@{/X-admin/lib/layui/dtree/font/dtreefont.css}">
    </head>
    <body>
        <form class="layui-form">
            <input type="hidden" th:value="${sysPermission.id}" id="id" name="id" required="" lay-verify="required"
                   autocomplete="off" class="layui-input">

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>上级
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" th:value="${sysPermission.parentId}" id="parentId" name="parentId" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                    <ul id="selTree1" class="dtree" data-id="0" ></ul>
                </div>
            </div>
          <div class="layui-form-item">
              <label for="name" class="layui-form-label">
                  <span class="x-red">*</span>名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysPermission.name}" id="name" name="name" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>全局唯一
              </div>
          </div>
            <div class="layui-form-item">
                <label for="href" class="layui-form-label">
                    <span class="x-red">*</span>类型
                </label>
                <div class="layui-input-inline">
                    <select id="type" name="type" lay-filter="s_filter" lay-verify="">
                        <option value="0" th:selected="${sysPermission.type == 0}">菜单</option>
                        <option value="1" th:selected="${sysPermission.type == 1}">按钮</option>
                    </select>
                </div>
            </div>
          <div class="layui-form-item" id="urlDiv">
              <label for="href" class="layui-form-label">
                  <span class="x-red">*</span>链接地址
              </label>
              <div class="layui-input-inline">
                  <input type="text" th:value="${sysPermission.href}" id="href" name="href" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
          </div>
            <div class="layui-form-item">
                <label for="permission" class="layui-form-label">
                    <span class="x-red">*</span>权限标识
                </label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${sysPermission.permission}" id="permission" name="permission" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
          <div class="layui-form-item">
              <label for="sort" class="layui-form-label">
                  <span class="x-red">*</span>排序
              </label>
              <div class="layui-input-inline">
                  <input type="number" th:value="${sysPermission.sort}" id="sort" name="sort" required="" lay-verify="required"
                  autocomplete="off" class="layui-input">
              </div>
              <div class="layui-form-mid layui-word-aux">
                  <span class="x-red">*</span>
              </div>
          </div>

          <div class="layui-form-item">
              <label class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" lay-submit="">
                  提交
              </button>
          </div>
      </form>

    <script>layui.use(['form', 'layer', 'laydate','dtree'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                dtree = layui.dtree;
            var dTree1 = dtree.renderSelect({
                elem: "#selTree1",
                width: "100%", // 指定树的宽度
                url: appPath + "/sys/permission/treeInfo",
                initLevel: '2',//默认展开层级，当该值大于level时，则会展开树的节点，直到不大于当前待展开节点的level
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                method: 'POST',
                request:{nodeId:"0"},//自定义参数，组件进行参数拼接时，会将该属性的串拼接到url,然后传递到后台进行数据查询
                response: {message:"msg", statusCode: 0},
                menubar: true, //开启菜单栏
                checkbar: false,
                selectCardHeight: "250",
                selectInitVal: $("#parentId").val(), // 设置默认值
                selectInputName: {
                    nodeId: "nodeId",
                    context: "context"
                }
            });

            dtree.on('node("selTree1")', function(obj){
                var param = dtree.selectVal("selTree1");
                $("#parentId").val(param.nodeId);
            });

            if($("#type").val()!=0){
                $('#urlDiv').hide();
                $('#href').removeAttr("lay-verify");
                $('#href').val("");
            }else{
                $('#urlDiv').show();
                $('#href').attr("lay-verify", "required");
            }
            form.on('select(s_filter)', function (data) {
                if(data.value !=0){
                    $('#urlDiv').hide();
                    $('#href').removeAttr("lay-verify");
                    $('#href').val("");
                }else{
                    $('#urlDiv').show();
                    $('#href').attr("lay-verify", "required");
                }
            })

            //监听提交
            form.on('submit(add)',
            function(data) {

               $.ajax({
                   url: appPath + '/sys/permission/update',
                   type: 'post',
                   data: data.field,
                   dataType: 'json',
                   success: function (result) {
                        if(result.code == 200){
                            layer.alert("修改成功", {
                                    icon: 6
                                },
                                function() {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        }else{
                            layer.alert(result.msg);
                        }
                   }
               })

                return false;
            });

        });
    </script>

    </body>

</html>
